<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>评论表单与列表基础 html 结构示例</title>
    <link rel="stylesheet" href="./xcomment.css">
</head>
<body>
<div style="width: 800px; margin: 0 auto; border: 0px solid red;">

<!-- form -->
<div class="xcomment-relative xcomment-form">
    <section class="xcomment-form-face">
        <img class="xcomment-form-avatar" src="https://i2.hdslb.com/bfs/face/0362e0c2fc5b5e443ec91d893ff784d029abb201.jpg@52w_52h.webp">
    </section>
    <section class="xcomment-relative xcomment-form-content">
        <div class="xcomment-form-content-login" style="display: none">
            你还没有登录，请&nbsp;<a href="javascript:;" data-action="login">登录</a>
        </div>
        <textarea class="xcomment-form-textarea" placeholder="请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。"></textarea>
    </section>
    <section class="xcomment-relative xcomment-form-widget">
        <button disabled="disabled" type="button" class="xcomment-form-btn">发表评论</button>
        <button type="button" class="xcomment-form-widget-item xcomment-form-widget-emoji">表情</button>
    </section>
</div>
<!-- // form -->

<div class="xcomment-list-header" data-role="filter">
    <a href="javascript:;" class="active">全部评论</a>
    <a href="javascript:;">按热度排序</a>
</div>
<div data-role="list">

    <!-- loading -->
    <div class="xcomment-list-loading"><i></i></div>
    
    <!-- item -->
    <div class="xcomment-relative xcomment-list-item">
        <section class="xcomment-list-face">
            <img class="xcomment-list-avatar" src="https://i2.hdslb.com/bfs/face/b001dcba7b7d0de387abb9adefe4e409ba9e03f4.jpg@52w_52h.webp">
        </section>
        <section class="xcomment-list-content xcomment-list-content-toplayer">
            <div class="xcomment-list-nick">
                <a href="">张三哈哈哈哈</a>
            </div>
            <div class="xcomment-list-text">
                我来水评论了我来水评论
            </div>
            <div class="xcomment-list-widget">
                <div class="xcomment-list-operation">
                    <i class="xcomment-icon xcomment-icon-dot"></i>
                    <div class="xcomment-list-operation-drop">
                        <a class="xcomment-list-operation-drop-item" href="javascript:;">举报</a>
                        <a class="xcomment-list-operation-drop-item" href="javascript:;">加入黑名单</a>
                    </div>
                </div>
                <span class="xcomment-list-widget-margin">#164</span>
                <span class="xcomment-list-widget-margin">来自<a href="">安卓客户端</a></span>
                <span class="xcomment-list-widget-margin">2018-03-29 21:21</span>
                <span class="xcomment-list-widget-prize xcomment-list-widget-margin">
                    <i class="xcomment-icon xcomment-icon-prize"></i>
                    <span>11</span>
                </span>
                <span class="xcomment-list-btn">回复</span>
            </div>
        </section>
    
        <!-- reply -->
        <section class="xcomment-list-reply">
            <div class="xcomment-relative xcomment-list-reply-item">
                <section class="xcomment-list-face">
                    <img class="xcomment-list-avatar xcomment-list-reply-avatar" src="https://i2.hdslb.com/bfs/face/b001dcba7b7d0de387abb9adefe4e409ba9e03f4.jpg@52w_52h.webp">
                </section>
                <section class="xcomment-list-content-reply">
                    <div class="xcomment-list-nick">
                        <a href="">张三哈哈哈哈</a>
                    </div>
                    <div class="xcomment-list-text xcomment-list-reply-text">氨基酸点击发送江东父老</div>
                    <div class="xcomment-list-widget xcomment-list-reply-widget">
                        <div class="xcomment-list-operation">
                            <i class="xcomment-icon xcomment-icon-dot"></i>
                            <div class="xcomment-list-operation-drop">
                                <a class="xcomment-list-operation-drop-item" href="javascript:;">举报</a>
                                <a class="xcomment-list-operation-drop-item" href="javascript:;">加入黑名单</a>
                            </div>
                        </div>
                        <span class="xcomment-list-widget-margin">2018-03-29 21:21</span>
                        <span class="xcomment-list-widget-prize xcomment-list-widget-margin">
                            <i class="xcomment-icon xcomment-icon-prize"></i>
                            <span>11</span>
                        </span>
                        <span class="xcomment-list-btn">回复</span>
                    </div>
                    <div style="border: 1px solid red">
                        <textarea>这里是回复区域</textarea>
                    </div>
                </section>
            </div>
            <div class="xcomment-relative xcomment-list-reply-item">
                <section class="xcomment-list-face">
                    <img class="xcomment-list-avatar xcomment-list-reply-avatar" src="https://i2.hdslb.com/bfs/face/b001dcba7b7d0de387abb9adefe4e409ba9e03f4.jpg@52w_52h.webp">
                </section>
                <section class="xcomment-list-content-reply">
                    <div class="xcomment-list-nick">
                        <a href="">张三哈哈哈哈 回复 张三：</a>
                    </div>
                    <div class="xcomment-list-text xcomment-list-reply-text">氨基酸点击发送江东父老氨基酸点击发送江东父老氨基酸点击发送江东父老氨基酸点击发送江东父老氨基酸点击发送江东父老氨基酸点击发送江东父老氨基酸点击发送江东父老氨基酸点击发送江东父老氨基酸点击发送江东父老氨基酸点击发送江东父老氨基酸点击发送江东父老氨基酸点击发送江东父老</div>
                    <div class="xcomment-list-widget xcomment-list-reply-widget">
                        <div class="xcomment-list-operation">
                            <i class="xcomment-icon xcomment-icon-dot"></i>
                            <div class="xcomment-list-operation-drop">
                                <a class="xcomment-list-operation-drop-item" href="javascript:;">举报</a>
                                <a class="xcomment-list-operation-drop-item" href="javascript:;">加入黑名单</a>
                            </div>
                        </div>
                        <span class="xcomment-list-widget-margin">2018-03-29 21:21</span>
                        <span class="xcomment-list-widget-prize xcomment-list-widget-margin">
                            <i class="xcomment-icon xcomment-icon-prize"></i>
                            <span>11</span>
                        </span>
                        <span class="xcomment-list-btn">回复</span>
                    </div>
                </section>
            </div>
        </section>
        <!-- // reply -->
    </div>
    <!-- // item -->
    
    <div class="xcomment-separation">
        <span>以上为热门评论</span>
    </div>
    
    <!-- item -->
    <div class="xcomment-relative xcomment-list-item">
        <section class="xcomment-list-face">
            <img class="xcomment-list-avatar" src="https://i2.hdslb.com/bfs/face/b001dcba7b7d0de387abb9adefe4e409ba9e03f4.jpg@52w_52h.webp">
        </section>
        <section class="xcomment-list-content xcomment-list-content-toplayer">
            <div class="xcomment-list-nick">
                <a href="">楼层用户昵称</a>
            </div>
            <div class="xcomment-list-text">
                我来水评论了我来水评论<img src="https://i0.hdslb.com/bfs/vip/f80d384875183dfe2e24be13011c595c0210d273.png@50w_50h.webp">
            </div>
            <div class="xcomment-list-widget">
                <div class="xcomment-list-operation">
                    <i class="xcomment-icon xcomment-icon-dot"></i>
                    <div class="xcomment-list-operation-drop">
                        <a class="xcomment-list-operation-drop-item" href="javascript:;">举报</a>
                        <a class="xcomment-list-operation-drop-item" href="javascript:;">加入黑名单</a>
                    </div>
                </div>
                <span class="xcomment-list-widget-margin">#164</span>
                <span class="xcomment-list-widget-margin">来自<a href="">安卓客户端</a></span>
                <span class="xcomment-list-widget-margin">2018-03-29 21:21</span>
                <span class="xcomment-list-widget-prize xcomment-list-widget-margin">
                    <i class="xcomment-icon xcomment-icon-prize"></i>
                    <span>11</span>
                </span>
                <span class="xcomment-list-btn">回复</span>
            </div>
        </section>
    </div>
    <!-- // item -->
    
</div>

</div>
</body>
</html>